<!-- 结构 -->
<script setup lang="ts">
import { ref } from 'vue';

const arr = ref(['苹果', '香蕉', '芒果', '榴莲'])
const person = ref({
    name: 'jack', age: 27, gender: '男'
})

</script>

<!-- JS逻辑 -->
<template>
    <div class="app-page">

        <!-- 对象遍历 -->
        <ul>
            <li v-for="(value, key, index) in person" :key="index">
                {{ index + 1 }} -- key:{{ key }} -- value:{{ value }}
            </li>
        </ul>

        <hr>

        <!-- 数组遍历 -->
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                序号：{{ index + 1 }} --- {{ item }}
            </li>
        </ul>

        <hr>

        <!-- 数字遍历 -->
        <div v-for="item in 10" :key="item">
            {{ item }}
        </div>

    </div>
</template>

<!-- 样式 -->
<style lang="css" scoped></style>